<template>
  <div class="My-group pages-box">
    <div class="header flex-center">
      <i class="iconfont icon-dajiantou" @click="$router.go(-1)"></i
      >我发起的组团
    </div>
    <div class="section">
      <div class="content">
        <!-- <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
          <van-list
            v-model="loading"
            :finished="finished"
            :finished-text="finishedText"
            @load="onLoad"
          > -->
        <div v-if="list.length > 0">
          <div
            class="item1"
            v-for="(item, index) in list"
            :key="index"
            @click="
              $router.push({ name: 'FellowshipDetail', query: { id: item.id } })
            "
          >
            <img v-lazy="item.coverImg" alt="" />
            <div class="con1">
              <div class="activity-title ellipsis">{{ item.title }}</div>
              <div class="tip">
                活动时间：<span
                  >{{ item.activeStart }}~{{ item.activeEnd }}</span
                >
              </div>
              <div class="btn flex-center">查看详情</div>
            </div>
          </div>
        </div>
        <div class="empty" v-else>
          <img
            style="width: 100%"
            src="../assets/img/common-empty.png"
            alt=""
          />
        </div>
        <!-- </van-list>
        </van-pull-refresh> -->
      </div>
    </div>
  </div>
</template>
<script>
import { getMyGroup } from "@/api/activity";
export default {
  data() {
    return {
      params: {
        pageNo: 1,
        pageSize: 10,
      },
      list: [],
      loading: false,
      finished: false,
      refreshing: false,
      finishedText: "没有更多了",
    };
  },
  created() {
    if (!localStorage.getItem("jyToken")) {
      return this.$router.replace({
        name: "Login",
        query: { dirUrlName: "JoinBrand" },
      });
    }
    this.getList();
  },
  methods: {
    getList() {
      getMyGroup(this.params)
        .then((res) => {
          if (res.code == 0) {
            this.list = res.data;
          } else {
            this.$toast(res.msg);
          }
        })
        .catch((err) => {
          this.$toast("数据获取失败，请稍后重试！");
        });
    },
    // 暂无分页，以下内容目前不用
    onLoad() {
      if (!localStorage.getItem("jyToken")) {
        return;
      }
      getMyGroup(this.params)
        .then((res) => {
          if (res.code == 0) {
            let data = res.data;
            if (this.refreshing) {
              this.list = [];
              this.refreshing = false;
            }

            if (this.params.pageNo == 1) {
              this.list = data.records;
            } else {
              this.list = this.list.concat(data.records);
            }
            this.loading = false;

            if (this.list.length >= data.total) {
              this.finished = true;
            } else {
              this.params.pageNo++;
            }
            if (this.list.length == 0) this.finishedText = "暂无数据";
          }
        })
        .catch((err) => {
          this.$toast("数据获取失败，请稍后重试！");
        });
    },
    onRefresh() {
      this.params.pageNo = 1;
      // 清空列表数据
      this.finished = false;
      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      this.onLoad();
    },
  },
};
</script>
<style lang="less" scoped>
.My-group {
  background: #f6f7f8;
  .content {
    padding: 16px 16px 20px;
    height: 100%;
    .item1 {
      background: #ffffff;
      border-radius: 6px;
      padding: 16px;
      display: flex;
      margin-bottom: 12px;
      img {
        width: 92px;
        height: 96px;
        border-radius: 2px;
        margin-right: 16px;
      }
      .con1 {
        display: flex;
        justify-content: space-between;
        flex-direction: column;
        flex: 1;
        .activity-title {
          font-size: 16px;
          font-weight: 600;
          color: #363a44;
          width: 200px;
        }
        .tip {
          font-size: 14px;
          color: #b3b5b9;
          margin-top: -10px;
        }
        .btn {
          width: 64px;
          height: 24px;
          background: rgba(255, 216, 225, 0.3100000023841858);
          border-radius: 2px 2px 2px 2px;
          opacity: 1;
          border: 1px solid #fd7895;
          font-size: 12px;
          color: #fd7895;
        }
      }
    }
  }
}
</style>
